<template>
  <div class="sdy-detail">
    <SdyHeader title="啥都有详情页" back></SdyHeader>
    <van-image :src='goodsInfo.img1'></van-image>
    <p>{{goodsInfo.proname}}</p>

    <!-- 底部 -->
    <Teleport to='#sdy-footer'>
      <van-action-bar>
        <van-action-bar-icon icon="chat-o" text="客服" color="#ee0a24" />
        <van-action-bar-icon @click='$router.push({path:"/cart"})' icon="cart-o" text="购物车" />
        <van-action-bar-icon icon="star" text="已收藏" color="#ff5000" />
        <van-action-bar-button @click='addCart' type="warning" text="加入购物车" />
        <van-action-bar-button type="danger" text="立即购买" />
      </van-action-bar>
    </Teleport>
  </div>
</template>

<script setup lang="ts">

// 拿到商品id
//如果没有就回到列表页
// 如果有就请求当前商品详细信息渲染在页面
import {onMounted,ref} from 'vue'
import {useRoute,useRouter,type Router,type RouteLocationNormalizedLoaded} from 'vue-router'
import {Dialog} from 'vant'
import {getGoodsDetailApi} from '@/api/goods'
import type {MyHotItem} from '@/config/interface'

const $route:RouteLocationNormalizedLoaded = useRoute()
const $router: Router = useRouter()

//验证是否存在proid
const testProid = ()=>{
  const proid = $route.query.proid
  if(!proid){
    //判断是否存在
    Dialog({
      title:'提示',
      message:'你要查看的商品不存在，请重试'
    }).then(()=>{
      $router.back()
    })

  }
}

//请求详细信息展示
//准备一个数据表示商品详细信息
const goodsInfo = ref<MyHotItem>({} as MyHotItem)
const getGoodsInfo = async ()=>{
  const res = await getGoodsDetailApi($route.query.proid as string)
  goodsInfo.value = res.data
  // console.log(goodsInfo.value)
}
//加入购物车
const addCart = async ()=>{
  console.log('加入购物车')
}

onMounted(()=>{
  testProid()
  getGoodsInfo()
})
</script>

<style scoped lang="scss"></style>
